import {designPage, onMounted, useRefs} from "plain-design-composition";
import {PlIcon, PlTooltip} from "plain-design";
import React from "react";
import {MicroLibService} from "@/micro/utils/MicroLibService";

export default designPage(() => {

    const {refs, onRef} = useRefs({chartEl: HTMLDivElement})

    onMounted(async () => {
        const echarts = await MicroLibService.load.echarts()
        const ins = echarts.init(refs.chartEl!)

        const dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
        const data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];

        const option = {
            grid: {
                top: '0',
                left: '0',
                right: '0',
                bottom: '0',
            },
            xAxis: {data: dataAxis,},
            yAxis: {
                splitLine: {show: false},
            },
            series: [
                {
                    type: 'bar',
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: 'rgba(55, 162, 255)'},
                                {offset: 1, color: 'rgba(116, 21, 219)'}
                            ]
                        )
                    },
                    data: data
                }
            ]
        };

        ins.setOption(option)
    })

    return () => (
        <div className="pro-data-statistic-summary-card">
            <div className="pro-data-statistic-summary-card-title">
                <span>下单统计</span>
                <PlTooltip tooltip={'更多'}>
                    <PlIcon icon={'el-icon-menu'} status="primary"/>
                </PlTooltip>
            </div>
            <div className="pro-data-statistic-summary-card-result">
                1,126
            </div>
            <div ref={onRef.chartEl} className="pro-data-statistic-chart-el"/>
            <div className="pro-data-statistic-summary">
                <span>转化率：</span>
                <span>42.11%</span>
            </div>
        </div>
    )
})